import React,{useState,useEffect} from "react";
import Router from 'next/router'
import Link from 'next/link'
import axios from "axios";
import apiUrl from '../config/apiUrl'
import { createFromIconfontCN } from '@ant-design/icons';


import  styles from '../styles/components/header.module.scss'
import {Row,Col,Menu} from 'antd'
import { HomeOutlined, YoutubeOutlined, PlaySquareOutlined } from '@ant-design/icons';



const Header = ()=>{
    const [navArray,setNavArray] = useState([])
    useEffect(()=>{
        const result = async ()=>{
            const result = await axios(apiUrl.getTypeInfo).then(res=>{
                return res.data.data
            })
            setNavArray(result)
        }
        result()
    },[])
    //点击方法
    const handleClick = e=>{
        if(e.key == 0){
            Router.push('/')

        }else{
            Router.push('/list?id='+e.key)
        }
    }
    //图标动态方法
    const IconFont = createFromIconfontCN({
        scriptUrl: '//at.alicdn.com/t/font_3012370_cxceywm4sm.js',
      });
    return(
        <div className={styles.header}>
            {/* <link rel="stylesheet" type='text/css' href="../styles/components/header.scss" /> */}
            <Row justify="center">
                <Col xs={24} sm={24} md={10} lg={15} xl={12}>
                    <span className={styles.header_logo}>技术胖</span>
                    <span className={styles.header_txt}>专注前端开发，每年100套</span>
                </Col>
                <Col xs={0} sm={0} md={14} lg={8} xl={6}>
                    <Menu mode="horizontal" onClick={handleClick}>
                        <Menu.Item key="0">
                            <HomeOutlined />
                            首页
                        </Menu.Item>
                        {
                            navArray.map((item)=>{
                                return (
                                    <Menu.Item key={item.id} >
                                        <IconFont type={item.icon}/>
                                        
                                        {item.typeName}
                                    </Menu.Item>
                                )
                            })
                        }
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}
//!子组件中不能使用这个方法来请求
// Header.getInitialProps = async ()=>{
//     const promise = axios(apiUrl.getTypeInfo).then(res=>{
//         console.log(res)
//         return res.data.data
//     })
//     return await promise;
// }
export default Header;